<template>
	<div class="Barteringgoods">
		<div class="search_bar">
			<el-row :gutter="20">
				<el-col :span="8">
					<div class="box">
						<div class="search_title">砍价状态：</div>
						<el-select
							@change="pageChange(1)"
							v-model="commodityClass"
							clearable
							placeholder="请选择"
						>
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="box">
						<div class="search_title">商品搜索：</div>
						<el-input
							v-model="commodityKeyowrd"
							placeholder="请输入关键字，id，商品名称"
						></el-input>
					</div>
				</el-col>
				<el-col :span="8" style="text-align: right">
					<el-button
						type="primary"
						style="text-align: right"
						@click="$router.push('/TheOne')"
						>添加砍价商品</el-button
					>
				</el-col>
			</el-row>
		</div>
		<el-table :data="commodityData" style="width: 100%">
			<el-table-column prop="id" label="序号" width="130">
			</el-table-column>
			<el-table-column prop="img" label="砍价图片" width="170">
				<template slot-scope="scope">
					<img :src="scope.row.img" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="title" label="名称和简介" class="itemBox">
				<template slot-scope="scope">
					<p style="font-size:14px;font-weight:bold;">
						{{ scope.row.obj.title }}
					</p>
					<p style="font-size:14px; color:#ccc;">
						x{{ scope.row.obj.num }}
					</p>
					<p style="font-size:14px;">¥{{ scope.row.obj.price }}.00</p>
				</template>
			</el-table-column>
			<el-table-column prop="people" label="参与人数"> </el-table-column>
			<el-table-column prop="peoples" label="帮忙砍价人数" width="260">
			</el-table-column>
			<el-table-column prop="allPeople" label="砍价成功人数" width="240">
			</el-table-column>
			<el-table-column prop="flag" label="砍价状态" width="220">
				<template slot-scope="scope">
					<el-switch
						:value="scope.row.flag === 1"
						@input="setFlag($event, scope.row)"
						active-color="#13ce66"
						inactive-color="#ff4949"
					>
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="230">
				<template>
					<el-button type="text" size="small"> 编辑 </el-button>
					<el-button type="text" size="small"> 删除 </el-button>
					<el-button type="text" size="small"> 更多 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="footer">
			<el-pagination
				background
				layout="prev, pager, next"
				:total="total"
				:current-page="pageIndex"
				:page-size="pageSize"
				@current-change="pageChange"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			commodityData: [],
			commodityKeyowrd: "",
			pageIndex: 1,
			pageSize: 10,
			total: 0,
			loadingBool: false,
			commodityClass: null,
			options: [
				{ value: 1, label: "母婴" },
				{ value: 2, label: "电器" },
				{ value: 3, label: "水果" },
				{ value: 4, label: "家用" },
				{ value: 5, label: "医疗" },
				{ value: 6, label: "美容" },
				
			],
		};
	},
	methods: {
		setFlag(flag, row) {
			setTimeout(() => {
				row.flag = flag ? 1 : 0;
			}, 100);
		},
		pageChange(ind) {
			this.loadingBool = true;
			this.pageIndex = ind;
			this.$api
				.commodityList({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					classId: this.commodityClass,
					keyword: this.commodityKeyowrd, // 关键字
				})
				.then((res) => {
					if (res.code === 1) {
						// 赋值数据
						this.commodityData = res.data;
						this.total = res.total;
					}
					this.loadingBool = false;
				});
		},
		handleClick() {
			this.pageChange(1);
			console.log(1);
		},
	},
	created() {
		this.pageChange(1);
	},
	filters: {
		timeToDate(value) {
			return new Date(value.split(" ")[0]).toLocaleString();
		},
	},
	watch: {
		commodityKeyowrd() {
			// 什么防抖 防止函数抖动
			clearTimeout(this.timer);
			this.timer = setTimeout(() => {
				this.pageChange(1);
			}, 700);
		},
	},
};
</script>

<style lang="scss">
@import "@css/style.scss";
.Barteringgoods {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	padding: 20px;
	.search_bar {
		width: 100%;
		padding: 10px;
		.box {
			width: 100%;
			display: flex;
			.search_title {
				padding: 0 10px;
				white-space: nowrap;
				line-height: 40px;
			}
			&:nth-child(2) {
				flex: 1;
			}
		}
	}
	.footer {
		width: 100%;
		padding: 15px;
		text-align: center;
	}
}
</style>
